<!--
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

 http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->
<div class="modal fade" id="addAssetModal" tabindex="-1" role="dialog" aria-labelledby="addAssetModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="addAssetModalLabel">Create asset</h4>
        <p class="modal-intro"> * 입력칸은 반드시 채워주세요</p>
      </div>
      <form [formGroup]="myForm2">
        <div class="modal-body">



          <div class="form-group text-left">
            <label for="certificateName">자격증 이름*</label>

            <input formControlName="certificateName" type="text" class="form-control">

          </div>




          <div class="form-group text-left">
            <label for="certificateScore">점수</label>

            <input formControlName="certificateScore" type="number" class="form-control">

          </div>




          <div class="form-group text-left">
            <label for="authorizedParticipantId">인증기관 ID*</label>

            <input formControlName="authorizedParticipantId" type="text" class="form-control">

          </div>




          <div class="form-group text-left">
            <label for="organizationName">인증기관 이름*</label>

            <input formControlName="organizationName" type="text" class="form-control">

          </div>




          <div class="form-group text-left">
            <label for="dob">발행일* (ex. 2000-01-01)</label>

            <input formControlName="dob" type="text" class="form-control">

          </div>




          <div class="form-group text-left">
            <label for="expirationDate">만료일 (ex. 2000-01-01)</label>

            <input formControlName="expirationDate" type="text" class="form-control">

          </div>



          <div class="form-group text-left">
            <label for="isPublic">공개여부</label>

            <input formControlName="isPublic" type="checkbox" class="form-control">

          </div>



        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
          <button (click)="addTransaction(myForm2);" type="submit" class="btn btn-success" data-dismiss="modal">확인</button>

        </div>
      </form>
    </div>
  </div>
</div>




<div class="modal fade" id="updateAssetModal" tabindex="-1" role="dialog" aria-labelledby="updateAssetModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="updateAssetModalLabel">Update Asset</h4>
        <p class="modal-intro"> * 입력칸은 반드시 채워주세요</p>
        <p class="modal-intro"> * 입력내용이 문제가 있을시 이력생성이 실패할 수 있습니다.</p>
      </div>
      <form [formGroup]="myForm">
        <div class="modal-body">



          <div class="form-group text-left" style="display:none;">
            <label for="assetId">assetId</label>


            <input [ngModel]="assetId" formControlName="assetId" class="form-control" disabled="disabled">


          </div>

          <div class="form-group text-left" style="display:none;">
            <label for="ownerId">ownerId</label>


            <input [ngModel]="ownerId" formControlName="ownerId" type="text" class="form-control" disabled="disabled">


          </div>

          <div class="form-group text-left">
            <label for="certificateName">자격증 이름*</label>


            <input [ngModel]="certificateName" formControlName="certificateName" type="text" class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="certificateScore">점수 </label>


            <input [ngModel]="certificateScore" formControlName="certificateScore" type="number" step='any' class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="authorizedParticipantId">인증기관 ID*</label>


            <input [ngModel]="authorizedParticipantId" formControlName="authorizedParticipantId" type="text" class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="organizationName">인증기관 이름*</label>


            <input [ngModel]="organizationName" formControlName="organizationName" type="text" class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="dob">발행일 (ex. 2000-01-01)</label>


            <input [ngModel]="dob" formControlName="dob" type="text" class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="expirationDate">만료일 (ex. 2000-01-01)</label>


            <input [ngModel]="expirationDate" formControlName="expirationDate" type="text" class="form-control">


          </div>

          <div class="form-group text-left" style="display:none;">
            <label for="transactionTime">transactionTime</label>


            <input [ngModel]="transactionTime" formControlName="transactionTime" type="text" class="form-control">


          </div>

          <div class="form-group text-left">
            <label for="isPublic">공개여부</label>


            <input [ngModel]="isPublic" formControlName="isPublic" type="checkbox" class="form-control">


          </div>



        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">취소</button>
          <button (click)="updateAsset(myForm)" type="submit" class="btn btn-success" data-dismiss="modal">확인</button>
        </div>
      </form>
    </div>
  </div>
</div>



<div class="modal fade" id="deleteAssetModal" tabindex="-1" role="dialog" aria-labelledby="deleteAssetModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="deleteAssetModalLabel">Delete Asset</h4>
      </div>
      <form [formGroup]="myForm" (ngSubmit)="deleteAsset()">
        <div class="modal-body">
          삭제 하시겠습니까?
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">아니오</button>
          <button (click)="deleteAsset()" type="submit" class="btn btn-danger" data-dismiss="modal">예</button>
        </div>
      </form>
    </div>
  </div>
</div>











<div class="container">
  <div *ngIf="errorMessage" class="alert alert-danger" role="alert">
    <strong>Error:</strong> {{errorMessage}}
  </div>

  <div class="row">
    <div class="col-md-9">
      <h1 class="asset-title" id='assetName'>Certificate</h1>
    </div>
    <div class="col-md-3">
      <button (click)="resetForm()" type="button" class="btn btn-primary" data-toggle="modal" data-target="#addAssetModal">
        <span style="font-size: 14px;font-family: inherit;border-right:1px solid rgba(255,255,255,0.5);padding-right:0.6em;margin-right:0.5em;vertical-align:middle;">
          <svg class="plus-svg" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10">
            <path fill-rule="evenodd" d="M5.5,4.5 L9.5,4.5 L10,4.5 L10,5.5 L9.5,5.5 L5.5,5.5 L5.5,9.5 L5.5,10 L4.5,10 L4.5,9.5 L4.5,5.5 L0.5,5.5 L0,5.5 L0,4.5 L0.5,4.5 L4.5,4.5 L4.5,0.5 L4.5,0 L5.5,0 L5.5,0.5 L5.5,4.5 Z"
            />
          </svg>
        </span>
        Create Asset
      </button>
    </div>
  </div>
  <br>
  <div class="row">
    <div class="col-md-12">
      <table class="table table-responsive">
        <thead class="thead">
          <tr class="thead-cols">

            <th class="info">자격증 이름</th>

            <th class="info">점수</th>

            <th class="info">인증기관 ID</th>

            <th class="info">인증기관 이름</th>

            <th class="info">발행일</th>

            <th class="info">만료일</th>

            <th class="info">공개여부</th>

            <th class="info">인증여부</th>

            <th class="info-actions">처리</th>

          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let asset of myCertificateList">




            <td class="asset-properties">{{asset.certificateName}}</td>

            <td class="asset-properties">{{asset.certificateScore}}</td>

            <td class="asset-properties">{{asset.authorizedParticipantId}}</td>

            <td class="asset-properties">{{asset.organizationName}}</td>
          
        
            <td class="asset-properties">{{transferToDate(asset.dob)}}</td>

            <td class="asset-properties">{{asset.expirationDate}}</td>

            <td class="asset-properties">{{asset.isPublic}}</td>

            <td class="asset-properties">
              <span *ngFor="let asset2 of myAuthenticationList">
                <b *ngIf="asset2.resumeAssetId == asset.assetId">
                  {{authenticationExist(asset2.approvalStatus)}}
                </b>
              </span>
              {{printAuthentication()}}

            </td>


            <td>
              <!--
              <button (click)="getForm(asset.assetId);" type="button" class="btn btn-update" data-toggle="modal" data-target="#updateAssetModal">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  width="12.8px" height="12.8px" viewBox="0 0 30.7 30.7" style="enable-background:new 0 0 30.7 30.7;" xml:space="preserve">
                  <g>
                    <path d="M1.5,30.7c0.1,0,0.2,0,0.4,0l5.9-1.5c0.8-0.2,1.3-1,1.1-1.8c-0.2-0.8-1-1.3-1.8-1.1l-3.6,0.9l0.8-3.8
                   c0.2-0.8-0.4-1.6-1.2-1.8c-0.8-0.2-1.6,0.4-1.8,1.2L0,28.9c-0.1,0.5,0.1,1,0.4,1.4C0.7,30.6,1.1,30.7,1.5,30.7z"
                    />
                    <path d="M10.4,25.2c0.3,0.3,0.7,0.4,1.1,0.4c0.4,0,0.8-0.1,1.1-0.4L30.3,7.5c0.6-0.6,0.6-1.5,0-2.1l-4.9-4.9
                   C25.1,0.2,24.7,0,24.3,0c-0.4,0-0.8,0.2-1.1,0.4L5.5,18.2c-0.3,0.3-0.4,0.7-0.4,1.1s0.2,0.8,0.4,1.1L10.4,25.2z M24.3,3.6l2.8,2.8
                   L11.5,22l-2.8-2.8L24.3,3.6z" />
                  </g>
                </svg>
              </button>
            -->

              <button (click)="setId(asset.assetId);" type="button" class="btn btn-delete" data-toggle="modal" data-target="#deleteAssetModal">
                <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                  width="13.8px" height="16px" viewBox="0 0 65.9 76.2" style="enable-background:new 0 0 65.9 76.2;" xml:space="preserve">
                  <path d="M42.8,60.2V22.6c0-1.7-1.3-3-3-3s-3,1.3-3,3v37.6c0,1.7,1.3,3,3,3S42.8,61.9,42.8,60.2z M29.1,60.2V22.6c0-1.7-1.3-3-3-3
                 s-3,1.3-3,3v37.6c0,1.7,1.3,3,3,3S29.1,61.9,29.1,60.2z M56.2,19.6c-1.7,0-3,1.3-3,3V68c0,1.2-1,2.2-2.2,2.2H14.9
                 c-1.2,0-2.2-1-2.2-2.2V22.6c0-1.7-1.3-3-3-3s-3,1.3-3,3V68c0,4.5,3.7,8.2,8.2,8.2H51c4.5,0,8.2-3.7,8.2-8.2V22.6
                 C59.2,21,57.9,19.6,56.2,19.6z M62.9,10.3H49.3V3c0-1.7-1.3-3-3-3H19.6c-1.7,0-3,1.3-3,3v7.3H3c-1.7,0-3,1.3-3,3s1.3,3,3,3h59.9
                 c1.7,0,3-1.3,3-3S64.5,10.3,62.9,10.3z M43.3,10.3H22.6V6h20.7L43.3,10.3L43.3,10.3z" />
                </svg>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>